/**
  * Flickering pentagon
  *
  * @author jh3y - jheytompkins.com
*/
@import 'common/utils';

$color: var(--primary);
$no-of-dots: 5;
$radius: 30px;
$size: 6px;

@function genShadow($pos, $color) {
  $shadows: ();
  $dot-color: $color;
  @for $dot from 1 through $no-of-dots {
    @if ($pos == $dot) {
      $dot-color: var(--secondary);
    } @else {
      $dot-color: $color;
    }
    $angle: (360 / $no-of-dots) * ($dot - 1);
    $xy: getPosition($angle, $radius);
    $shad-props: $xy 0 0 $dot-color;
    $shadows: append($shadows, $shad-props, comma);
  }
  @return $shadows;
}

@keyframes flickering-pentagon {
  @for $p from 1 through $no-of-dots {
    #{($p * (100 / $no-of-dots)) * 1%} {
      box-shadow: genShadow($p, $color);
    }
  }
}

.flickering-pentagon:before {
  animation: flickering-pentagon .25s infinite linear;
  box-shadow: genShadow(0, $color);
  border-radius: 100%;
  display: block;
  content: '';
  height: $size;
  width: $size;
}